<template>
  <div class="app-container">
    <router-view v-if="['/', '/login'].includes(route.path)" />
    <template v-else>
      <TopBar class="top-bar" :style="commandCenterPageStyle.topbar" />
      <main class="main-container" :style="commandCenterPageStyle.main">
        <router-view class="router-view" v-slot="{ Component }" :style="commandCenterPageStyle.main">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <!-- <RouterView class="router-view" :style="commandCenterPageStyle.main" /> -->
      </main>
    </template>
  </div>
</template>

<script setup>
import { computed } from "vue";
import TopBar from "@/components/TopBar/index.vue";
import { useRoute } from 'vue-router';

const route = useRoute();
const commandCenterPageStyle = computed(() => {
  if (route.path == '/commandCenter' || route.path == '/activityManage' ) return {
    // topbar: { backgroundColor: 'rgba(255, 255, 255, 0.5)', backdropFilter: 'blur(2px)', boxShadow: '0 4px 20px 20px rgba(255, 255, 255, 0.6)' },
    topbar: { backgroundColor: 'rgba(255, 255, 255, 0.5)', backdropFilter: 'blur(2px)' },
    main: { padding: 0 }
  };
  return {}
})
// console.log('route', route);

</script>

<style lang="scss" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  position: relative;

  .top-bar {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ycy-top-bar-height);
  }

  .main-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: var(--ycy-gap-base);
    padding-top: calc(var(--ycy-top-bar-height) + var(--ycy-gap-base));

    .router-view {
      height: 100%;
      padding: var(--ycy-gap-base);
      border-radius: var(--el-border-radius-base);
      background-color: var(--el-bg-color);
    }
  }
}
</style>
